<template>
  <x-tab :title="'寻源中心'" :isShowExpand="false" :isShowMore="true" @on-More="handleMore">
    <div class="source-list-panel">
      <el-tabs v-model="activeName" type="border-card" class="source-list-hearder" @tab-click="handleClick">
        <el-tab-pane label="询报价" name="first"></el-tab-pane>
        <el-tab-pane label="定价管理" name="second"></el-tab-pane>
      </el-tabs>
      <x-table
        style="margin-top: 12px"
        :isPagination="false"
        :data-source="tableData"
        :name="activeName"
        :height="203"
        :loading="loading"
        :row-key="'id'"
      >
        <el-table-column :label="$t('common.serialNumber')" :width="55" fixed type="index" />
        <el-table-column
          v-for="item in colums"
          :key="item.prop"
          :prop="item.prop"
          :fixed="item.fixed"
          :show-overflow-tooltip="true"
          :width="item.width"
          :label="item.label"
          :sortable="'custom'"
        >
          <template #default="scope">
            <x-state-cell
              v-if="item.prop === 'state' && activeName === 'first'"
              :stateClass="scope.row[item.prop] === 0 ? 'gray' : scope.row[item.prop] ? 'success' : ''"
              :text="selectDictLabel(dictOptions['srm_enquiry.state'], scope.row[item.prop])"
            />
            <x-state-cell
              v-else-if="item.prop === 'state' && activeName === 'second'"
              :stateClass="scope.row[item.prop] === 0 ? 'gray' : scope.row[item.prop] ? 'success' : ''"
              :text="selectDictLabel(dictOptions['srm_pricing.state'], scope.row[item.prop])"
            />
            <span v-else> {{ scope.row[item.prop] | emptyVal }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" :label="$t('common.opeartion')" :align="'center'" width="140">
          <template slot-scope="scope">
            <more-table-actions :action-list="acitonList" :row="scope.row" @onActionClick="handleActions" />
          </template>
        </el-table-column>
      </x-table>
    </div>
  </x-tab>
</template>
<script>
  import { TableListMixin, selectDictLabel } from '@package/utils'
  import { searchColumns, searchActions, pricingColumns, pricingActions } from '../config/homeConfig'
  import { quoteListUrl, pricingListUrl } from '../api/index'

  export default {
    name: 'SearchSource',
    mixins: [TableListMixin],
    props: {
      dictOptions: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        activeName: 'first',
        loading: false,
        searchColumns,
        searchActions,
        quoteListUrl,
        pricingColumns,
        pricingActions,
        pricingListUrl,
        otherParam: {},
        listUrl: '',
        colums: [],
        acitonList: [],
        /* 分页参数 */
        pagination: {
          pageNum: 1,
          pageSize: 5,
          total: 0
        },
        disableMixinCreated: true
      }
    },
    watch: {
      activeName: {
        handler(val) {
          this.listUrl = this.activeName === 'first' ? this.quoteListUrl : this.pricingListUrl
          this.colums = this.activeName === 'first' ? this.searchColumns : this.pricingColumns
          this.acitonList = this.activeName === 'first' ? this.searchActions : this.pricingActions
          this.otherParam = this.activeName === 'first' ? { state: 1 } : { state: 2 }
          this.loadData()
        },
        immediate: true,
        deep: true
      }
    },
    created() {},
    methods: {
      selectDictLabel,
      handleClick(tab, event) {
        this.activeName = tab.name
      },
      handleActions({ key, data }) {
        switch (key) {
          case 'quote':
            this.$router.push({
              name: 'EnquiryDetail',
              query: {
                id: data.id,
                quoteSign: true
              }
            })
            break
          case 'view':
            this.$router.push({
              name: 'PricingDetail',
              query: {
                id: data.id
              }
            })
            // if (this.activeName === 'second') {
            //   this.$router.push({
            //     name: 'PricingDetail',
            //     query: {
            //       id: data.id
            //     }
            //   })
            // } else {
            //   this.$router.push({
            //     path: '/searchSource/enquiry/enquiryDetail',
            //     query: {
            //       id: data.id
            //     }
            //   })
            // }
            break
          case 'agree':
            this.$router.push({
              path: '/searchSource/managePricing/pricingDetail',
              query: {
                id: data.id
              }
            })
            break
        }
      },
      handleMore() {
        let path = '/searchSource/managePricing'
        if (this.activeName === 'first') {
          path = '/searchSource/enquiry'
        }
        this.$router.push({ path })
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '../style/home';
</style>
<style>
  .source-list-hearder.el-tabs--border-card {
    box-shadow: none;
    border-bottom-width: 0;
    border-radius: 3px 3px 0px 0px;
  }
  .source-list-hearder.el-tabs--border-card > .el-tabs__header {
    border-width: 0;
    border-bottom: 1px solid #e4e7ed;
    border-radius: 3px 3px 0px 0px;
  }
  .source-list-hearder.el-tabs--border-card .el-tabs__nav {
    margin: 0 20px;
    margin-top: 4px;
  }
  .source-list-hearder.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    border-right-color: #e0e0e0;
    border-left-color: #e0e0e0;
    border-top-color: #e0e0e0;
    border-radius: 4px 4px 0px 0px;
  }
  .source-list-hearder.el-tabs--border-card > .el-tabs__content {
    padding: 0;
  }
  .source-list-hearder.el-tabs--border-card > .el-tabs__header .el-tabs__item {
    color: #757575;
  }
</style>
